import Vue from 'vue'
import Router from 'vue-router'

const login = () => import('./views/Login')
const home = () => import('./views/Home')
const welcome = () => import('./views/Welcome')

const user = () => import('./components/user/user/User')

const roles = () => import('./components/roles/roles/Roles')
const rights = () => import('./components/roles/rights/Rights')

const goodsList = () => import('./components/goods/goodsList/GoodsList')
const addGoods = () => import('./components/goods/goodsList/childComponents/Goods_AddGoodsView')
const params = () => import('./components/goods/params/Params')
const categories = () => import('./components/goods/categories/Categories')

const orders = () => import('./components/orders/orders/Orders')

const reports = () => import('./components/reports/reports/Reports')

Vue.use(Router)

const children = [{
  path: '/welcome',
  component: welcome,
  // 存储路由自定义数据
  meta:{title:'欢迎'},
  // 独享路由守卫
  beforeEnter: (to, from, next) => {
    // ...
    next()
  }
}, {
  path: '/users',
  component: user,
  meta:{title:'用户管理'}
}, {
  path: '/roles',
  component: roles,
  meta:{title:'角色管理'}
}, {
  path: '/rights',
  component: rights,
  meta:{title:'权限管理'}
}, {
  path: '/goods',
  component: goodsList,
  meta:{title:'商品管理'}
  
}, {
  path: '/params',
  component: params,
  meta:{title:'参数管理'}
}, {
  path: '/categories',
  component: categories,
  meta:{title:'分类管理'}
}, {
  path: '/orders',
  component: orders,
  meta:{title:'订单管理'}
}, {
  path: '/reports',
  component: reports,
  meta:{title:'数据统计'}
}, {
  path: '/goods/add',
  component: addGoods
}]

const router = new Router({
  // mode: 'history',路由器工作模式 默认为hash 带#不美观 （但hash 兼容性强，兼容较老的浏览器）
  /**
6.14. 路由器的两种工作模式
1
 对于一个url来说，什么是hash值？
 #及其后面的内容就是hash值
2
 hash值不会包含在HTTP请求中，即：hash值不会带给服务器 
3
hash模式 
a
地址中永远带着#号，不美观
b
若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
c
兼容性较好
4
 history模式
a
地址干净，美观
b
兼容性和hash模式相比略差
c
应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题 */
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '',
      redirect: '/login'
    },
    {
      path: '/login',
      component: login
    },
    {
      path: '/home',
      component: home,
      redirect: '/welcome',
      children
    }
  ]
})
// 全局前置路由守卫 过滤器
// to去哪里，from 来自哪里 next放行转向
router.beforeEach((to, from, next) => {
  // console.log('想去'+to.path)
  // console.log('来自' + from.path)
  // 若是路径/login 直接通过
  if (to.path === '/login') return next()
  // 获得登录状态
  const tokenStr = window.sessionStorage.getItem('token')
  // 登录状态为空就返回到登录页面
  if (!tokenStr) return next('/login')
  // 不为空，通过
  next()
}),

// 全局后置路由守卫 过滤器
// to去哪里，from 来自哪里 
router.afterEach((to, from) => {
  // 修改顶部标题
  document.title = to.meta.title||"电商后台管理系统"
})

export default router
